<template>
  <div>
    <div class="search-wrap">
      <div style="display: inline-block; float: right">
        <a-form layout="inline">
          <a-form-item label="数据中心">
            <a-select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body;
                }
              "
              style="min-width: 200px"
              v-model="datacenterId"
            >
              <a-select-option
                v-for="d in datacenterList"
                :key="d.id"
                :value="d.id"
              >
                {{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item style="margin-right: 5px">
            <a-button
              type="primary"
              @click="loadData(true)"
              icon="search"
            >
              查询
            </a-button>
            <a-button
              @click="resetSearchForm"
              icon="reload"
              style="margin-left: 8px"
            >
              重置
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>

    <a-row>
      <template v-if="dataSource && dataSource.length">
        <a-col
          v-for="d in dataSource"
          :key="d.id"
          :span="8"
          style="margin-bottom: 30px;"
        >
          <radar
            :chartId="d.id"
            :title="d.name"
            :points="d.totalScore"
            :data="setChartData(d)"
          />
        </a-col>
      </template>
      <template v-else>
        <a-col :span="24">
          <a-empty />
        </a-col>
      </template>
    </a-row>
    <a-pagination
      v-if="page.total > 0"
      style="text-align: right; margin-top: 20px"
      size="small"
      :total="page.total"
      :show-total="(total, range) => `${range[0]}-${range[1]} 共${total}条`"
      :page-size="page.pageSize"
      :default-current="page.current"
      @change="loadData"
    />
  </div>
</template>

<script>
  import Radar from "./Radar";
  import { gPostAction } from "@/api/manage";
  export default {
    name: "Model",
    components: {
      Radar,
    },
    props: {
      type: {
        type: String,
        module: String,
        default: "",
      },
    },
    data() {
      return {
        datacenterId: "",
        datacenterList: [],
        page: {
          total: 10,
          pageSize: 10,
          current: 1,
        },
        dataSource: [],
      };
    },
    mounted() {
      this.loadDatacenter();
      this.loadData();
    },
    methods: {
      setChartData(record) {
        const radarData = [];
        if (record.factorNames && record.scores) {
          const factorNames = [];
          record.factorNames.split(",").forEach((f) => {
            factorNames.push(f);
          });
          const scores = [];
          record.scores.split(",").forEach((s) => {
            scores.push(s);
          });
          factorNames.forEach((e, i) => {
            radarData.push({
              item: e,
              score: scores[i],
            });
          });
        }
        return radarData;
      },
      loadDatacenter() {
        gPostAction("/asset/pageDatacenter", {}).then((res) => {
          const data = res.data;
          if (data && data.list) {
            this.datacenterList = data.list;
            this.datacenterList.unshift({ id: "", name: "全部" });
          }
        });
      },
      loadData(isDoSearch) {
        const postData = {};
        postData.pageSize = this.page.pageSize;
        postData.pageNo = this.page.current;
        if (this.datacenterId) {
          postData.datacenterId = this.datacenterId;
        }
        postData.modelType = this.type;
        if (postData.modelType == "AIR") {
          postData.title =
            "精确管控与供电制冷联动-供电制冷最优模型-设备最优成本代价模型总览-制冷设备最优成本代价模型";
          postData.content = "查询制冷设备最优成本代价模型评分列表";
        } else {
          postData.title =
            "精确管控与供电制冷联动-供电制冷最优模型-设备最优成本代价模型总览-供电设备最优成本代价模型";
          postData.content = "查询供电设备最优成本代价模型评分列表";
        }
        if (isDoSearch) {
          this.page.current = 1;
          postData.pageNo = 1;
        }
        gPostAction("/model/pageModelScore", postData).then((res) => {
          const data = res.data;
          if (data && data.list) {
            this.dataSource = data.list;
            this.page.total = data.totalCount;
          }
        });
      },
      resetSearchForm() {
        this.datacenterId = "";
      },
    },
    watch: {},
  };
</script>